<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>热销时装页面</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            div{
                width:786px;
                margin:20px auto;
            }
            li{
                list-style: none;
                border:1px solid #ccc;
                width:240px;
                height:150px;
                box-sizing:border-box;
            }
            .clearfix:after{
                clear:both;
                display:table;
                content:"";
            }
            .fl{
                float:left;
            }
            .fr{
                float:right;
            }
            li:first-of-type{
                height:300px;
                border-right:none;
            }
            li:nth-of-type(even){
                border-right:none;
            }
            li:nth-of-type(n+2):nth-of-type(-n+3){
                border-bottom:none;
            }
            .txt{
               width:85px;
               margin:20px 10px 20px 20px;
               color:#666;
               font-size:14px;
            }
            p{
                margin-top:10px;
                color:#999;
                font-size:12px;
            }
            img{
                margin-top:30px;
                margin-right:5px;
            }
            .f1 .txt{
                width:240px;
                margin-top:40px;
            }
            .f1 img{
                margin-right:20px;
                margin-top:50px;
            }
            img:hover{
                transform:translateX(-12px);
                transition:all 1s ease-out;
            }
        </style>
    </head>
    <body>
        <div>
            <ul class="clearfix">
                <li class="f1 fl clearfix">
                    <a href="#">
                        <div class="fl txt">
                            <h4>超级信用卡</h4>
                            <p>线上线下课累计彩贝积分</p>
                        </div>
                        <a href="#"><img class="fr" src="images/1.bmp"/></a>
                    </a>
                </li>
                <li class="fl clearfix">
                    <a href="#">
                        <div class="fl txt">
                            <h4>彩贝抢霸</h4>
                            <p>每天10点更新</p>
                        </div>
                        <img class="fr" src="images/2.bmp"/>
                    </a>
                </li>
                <li class="fl">
                    <a href="#">
                        <div class="fl txt">
                            <h4>热门优惠劵</h4>
                            <p>全场免费领取</p>
                        </div>
                        <img class="fr"src="images/3.bmp"/>
                    </a>
                </li>
                <li class="fl">
                    <a href="#">
                        <div class="fl txt">
                            <h4>促销活动</h4>
                            <p>汇集全网优惠</p>
                        </div>
                        <img class="fr" src="images/4.bmp"/>
                    </a>
                </li>
                <li class="fl">
                    <a href="#">
                        <div class="fl txt">
                            <h4>精挑细选</h4>
                            <p>给你最好的选择</p>
                        </div>
                        <img class="fr" src="images/5.bmp"/>
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>















